<template>
<div>
  <div id ="upper" style="width:100%;text-align: center">
    <el-row>
      <el-col :span="24"><div class="grid-content bg-purple-light">
        <div style="float: left; margin: 20px 100px; font-weight: 700;color:#606266;font-size: 20px"><i class="el-icon-search"></i>委托查询</div>
      </div></el-col>
    </el-row>
    <!--  查询条件-->
    <el-form :inline="true" :model="queryForm" style="text-align: left; margin: 0 10%">
      <el-form-item label="车牌号">
        <el-input v-model="queryForm.carNumber" placeholder="车牌号" clearable></el-input>
      </el-form-item>
      <el-form-item label="司机姓名">
        <el-input v-model="queryForm.carInfo.anotherOne" placeholder="司机姓名" clearable></el-input>
      </el-form-item>
      <el-form-item label="当前状态">
        <el-select v-model="queryForm.status" placeholder="请选择">
          <el-option
            v-for="item in statusList"
            :key="item"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="info" @click="getList" plain>查询</el-button>
        <el-button type="info" @click="queryFormReset()" plain>重置</el-button>
        <el-button type="info" @click="add()" plain>新增</el-button>
      </el-form-item>
    </el-form>
  </div>
  <el-row>
    <el-col :span="24"><div class="grid-content bg-purple-light">
      <div style="float: left; margin: 0 100px; font-weight: 700;color:#606266;font-size: 20px"><i class="el-icon-s-unfold"></i>数据列表</div>
    </div></el-col>
  </el-row>

  <div id="s" class="animate__animated animate__zoomIn animate__delay-1s" style="margin-top: 20px">
    <div>

    </div>
    <el-table :data="tableData" stripe style="width: 100%" :header-cell-style="{background:'rgb(32,158,145)',color:'#FFF'}">
      <el-table-column
        align="center"
        width="80px"
        prop="id"
        label="序号">
      </el-table-column>
      <el-table-column
        align="center"
        prop="mid"
        label="维保单号">
      </el-table-column>
      <el-table-column
        align="center"
        width="150"
        prop="carNumber"
        label="车牌号">
      </el-table-column>
      <el-table-column
        align="center"
        width="120"
        prop="carInfo.anotherOne"
        label="司机姓名">
      </el-table-column>
      <el-table-column
        align="center"
        width="120"
        prop="mtType"
        label="维保类型">
      </el-table-column>
      <el-table-column
        align="center"
        prop="mtAddress"
        label="维保地点">
      </el-table-column>
      <el-table-column
        align="center"
        prop="mtContent"
        label="维保内容">
      </el-table-column>
      <el-table-column
        align="center"
        prop="mtPlanTime"
        label="维保时间">
      </el-table-column>
      <el-table-column
        align="center"
        prop="mtActuralTime"
        label="实际执行时间">
      </el-table-column>
      <el-table-column
        align="center"
        prop="mtCompleteTime"
        label="完成时间">
      </el-table-column>
      <el-table-column
        align="center"
        prop="status"
        label="状态">
      </el-table-column>
      <el-table-column
        align="center"
        label="操作"
        width="100">
        <template v-slot="scope">
          <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
          <el-popconfirm title="确定删除吗？" @confirm="remove(scope.row)">
            <el-button slot="reference" type="text" size="small">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-row>
      <el-col :span="24"><div class="grid-content bg-purple-light">
        <div style="margin: 20px"></div>
      </div></el-col>
    </el-row>
    <!--  分页-->
    <el-pagination
      background
      @size-change="getList"
      @current-change="getList"
      :current-page.sync="queryForm.pageNum"
      :page-sizes="[10, 20, 30, 40, 60, 80, 100]"
      :page-size.sync="queryForm.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <el-row>
      <el-col :span="24"><div class="grid-content bg-purple-light">
        <div style="margin: 20px"></div>
      </div></el-col>
    </el-row>
  </div>
    <!--  新增/修改页面-->
    <el-dialog
      :title="title"
      :visible.sync="show"
      width="30%">
      <span>
        <el-form :model="form" :rules="rules" ref="ruleForm" label-width="80px">
          <el-form-item label="车牌号" prop="carNumber">
             <el-autocomplete
               style="width: 100%"
               class="inline-input"
               v-model="form.carNumber"
               :fetch-suggestions="querySearchNumber"
               placeholder="请输入车牌号"
             ></el-autocomplete>
          </el-form-item>
          <el-form-item label="司机" prop="driverName">
             <el-autocomplete
               style="width: 100%"
               class="inline-input"
               v-model="form.driverName"
               :fetch-suggestions="querySearchDriverName"
               placeholder="请输入司机姓名"
             ></el-autocomplete>
          </el-form-item>
          <el-form-item label="维保类型" prop="mtType">
            <el-select v-model="form.mtType" placeholder="请选择" style="width: 100%">
                <el-option
                  v-for="item in mtTypeList"
                  :key="item"
                  :label="item"
                  :value="item">
                </el-option>
             </el-select>
          </el-form-item>
          <el-form-item label="维保时间" prop="mtPlanTime">
              <el-date-picker style="width: 100%"
                              v-model="form.mtPlanTime"
                              type="datetime"
                              value-format="yyyy-MM-dd HH:mm:ss"
                              placeholder="选择日期时间">
             </el-date-picker>
          </el-form-item>
          <el-form-item label="维保地点" prop="mtAddress">
             <el-input v-model="form.mtAddress"></el-input>
          </el-form-item>
          <el-form-item label="维保内容" prop="mtContent">
             <el-input v-model="form.mtContent"></el-input>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="show = false">取 消</el-button>
        <el-button type="primary" @click="submit()">确 定</el-button>
      </span>
    </el-dialog>

</div>
</template>

<script>
export default {
  name: "DispatchMaintenance",
  data() {
    return {
      //查询对象
      queryForm: {
        carNumber: '',
        carInfo:{
          anotherOne:''
        },
        status:"",
        pageNum: 1,
        pageSize: 10
      },
      //表格数组
      tableData: [],
      //共多少条
      total: 0,
      // 下拉状态列表
      statusList:[],

      //校验规则
      rules: {
        carNumber: [{required: true, message: '请输入车牌号', trigger: 'blur'}],
        mtType: [{required: true, message: '请输入维保类型', trigger: 'blur'}],
        mtPlanTime: [{required: true, message: '请选择维保时间', trigger: 'blur'}],
        mtAddress: [{required: true, message: '请输入地址', trigger: 'blur'}],
        mtContent: [{required: true, message: '请输入维保内容', trigger: 'blur'}]
      },

      //新增与编辑表格
      form:{},
      //显示新增、修改
      show: false,
      //标题
      title: '',
      disabled: false,

      // 输入建议返回的车列表
      cars:[],
      // 维保类型列表
      mtTypeList:[]


    }
  },
  methods: {
    getList() {
      this.$axios({
        url: 'dispatch/maintenance/list',
        method: 'post',
        data: this.queryForm
      }).then(res => {
        if (res.data.success) {
          this.tableData = res.data.object.list;
          this.total = res.data.object.total;
        }
      }).catch(err => {
        this.$message.error(err.message);
      })
    },
    getStatusList() {
      this.$axios({
        url: 'dispatch/maintenance/statusList',
        method: 'post',
      }).then(res => {
        if (res.data.success) {
          this.statusList = res.data.object;
        }
      }).catch(err => {
        this.$message.error(err.message);
      })
    },
    getMtTypeList() {
      this.$axios({
        url: 'dispatch/maintenance/mtTypeList',
        method: 'post',
      }).then(res => {
        if (res.data.success) {
          this.mtTypeList = res.data.object;
        }
      }).catch(err => {
        this.$message.error(err.message);
      })
    },
    queryFormReset(){
      this.queryForm.status = null;
      this.queryForm.carNumber = null;
      this.queryForm.carInfo.anotherOne = null;
      this.getList();
    },
    getCarList(){
      this.$axios({
        url: 'car/listAll',
        method: 'post',
      }).then(res => {
        if (res.data.success) {
          this.cars = res.data.object;
        }
      }).catch(err => {
        this.$message.error(err.message);
      })
    },
    querySearchNumber(queryString, cb) {
      let cars = this.cars;
      for(let i = 0;i < cars.length;i++){
        cars[i].value = cars[i].number;
      }
      console.info(cars);
      let results = queryString ? cars.filter(this.createFilter(queryString)) : cars;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    querySearchDriverName(queryString, cb) {
      let cars = this.cars;
      for(let i = 0;i < cars.length;i++){
        cars[i].value = cars[i].anotherOne;
      }
      console.info(cars);
      let results = queryString ? cars.filter(this.createFilter(queryString)) : cars;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (car) => {
        return (car.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    success() {
      this.getList()
    },
    add() {
      //设置标题
      this.title = '新增'
      //显示对话框
      this.show = true
      //清空表单
      this.form = {}
      //获得所有汽车列表
      this.getCarList()
      //清空校验结果
      this.$nextTick(() => {
        this.$refs['ruleForm'].clearValidate();
      })
      this.disabled = false
      this.rules.password[0].required = true;
      this.rules.checkPassword[0].required = true;
    },
    edit(row) {
      this.title = '修改'
      //清空表单
      this.form = {}
      //给form对象赋值
      this.form = Object.assign({}, row);
      //显示对话框
      this.show = true
      //清空校验结果
      this.$nextTick(() => {
        this.$refs['ruleForm'].clearValidate();
      })
      this.disabled = true
    },
    remove(row) {
      this.$axios({
        url: 'dispatch/maintenance/remove/' + row.id,
        method: 'post'
      }).then(res => {
        if (res.data.success) {
          this.$message({
            message: res.data.message,
            type: 'success'
          });
          this.getList();
        } else {
          this.$message.error(res.data.message);
        }
      }).catch(err => {
        this.$message.error(err.message);
      })
    },
    submit() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          //校验通过
          if (this.title == '新增') {
            this.$refs['ruleForm'].validate((valid) => {
              if (valid) {
                this.$axios({
                  url: 'dispatch/maintenance/add',
                  method: 'post',
                  data: this.form
                }).then(res => {
                  if (res.data.success) {
                    this.show = false;
                    this.getList()
                  } else {
                    this.$message.error(res.data.message);
                  }
                }).catch(err => {
                  this.$message.error(err.message);
                })
              }
            });
          } else {
            this.$axios({
              url: 'dispatch/maintenance/edit',
              method: 'post',
              data: this.form
            }).then(res => {
              if (res.data.success) {
                this.show = false;
                this.getList()
              } else {
                this.$message.error(res.data.message);
              }
            }).catch(err => {
              this.$message.error(err.message);
            })
          }
        }
      });
    },
  },
  created() {
    this.getList();
    this.getStatusList();
    this.getCarList();
    this.getMtTypeList();
  }
}
</script>

<style scoped>
#s{
  width:90%;
  margin:10px auto;
  background-color: #ffffff;
  box-shadow: 10px 10px 5px #c4c6c7;
  border-radius: 5px
}
.el-button--info:hover {
  background: #209e91;
  border-color: #209e91;
  color: #FFF;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: rgb(32,158,145);
  color: #fff;
}
.el-pagination span{
  background: rgb(32,158,145);
  border: 1px solid #FFBB46;
  color: rgb(32,158,145);
  padding: 0 5px;
  line-height: 2;
  border-radius: 4px;
}
.el-pagination.is-background .el-pager li:not(.disabled){
  background-color: rgb(32,158,145);
  color: #fff;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: rgb(32,158,145);
  color: #fff;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: rgb(32,158,145);
}
</style>
